<template>
  <div class="content-view">

    <div class="table-head-tool">
      <Button type="primary" @click="showAddWarp">新增</Button>

      <Button type="default" @click="exportCsv">导出</Button>
    </div>
    <div class="table-body">
      <Tables ref="tables" :columns="gridOption.columns" :value="gridOption.data">
      </Tables>
    </div>

    <editModal ref="editModal" :columns="gridOption.columns" :data="gridOption.editRow">
    </editModal>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import userServer from '@/api/system/userServer'
import roleServer from '@/api/system/roleServer'
import uiTool from '@/libs/uiTool'

export default {
  name: 'tables_page',

  data() {
    return {
      gridOption: {
        editRow: {},
        columns: [
          { title: '登陆名', key: 'name' },

          {
            title: '密码',
            key: 'password',
            render(h, params) {
              return <span>******</span>
            },
          },
          {
            title: '所属角色',
            key: 'roleId',
            com: 'Select',
            render: (h, params) => {
              if (params.row.role) {
                return h('span', params.row.role.name)
              } else {
                return h('span', '')
              }
            },
          },

          {
            title: '操作',
            render: (h, params) => {
              let btns = [
                {
                  title: '修改',
                  type: 'primary',
                  click: () => {
                    this.showEditWarp(params.row)
                  },
                },
                {
                  title: '删除',
                  type: 'primary',
                  click: () => {
                    this.delConfirm(params.row)
                  },
                },
              ]

              return uiTool.getBtn(h, btns)
            },
          },
        ],
        data: [],
      },
    }
  },
  computed: {
    ...mapGetters({
      shopList: 'shop/shopList',
    }),
  },
  created() {
    this.init()
    this.initCol()
  },
  methods: {
    async init() {
      let res = await userServer.all()
      this.gridOption.data = res.data
    },
    async initCol() {
      let res = await roleServer.list()
      this.roles = res.data
      let roleSource = this.roles.map((p) => {
        return {
          key: p.id,
          value: p.name,
        }
      })

      let roleRow = this.gridOption.columns.find((p) => p.key === 'roleId')
      if (roleRow) {
        roleRow.source = roleSource
      }
    },

    showAddWarp() {
      this.$refs.editModal.addShow({}, async (newRow) => {
        await userServer.add(newRow)
        rootVue.$Message.success('新增成功！')
        this.init()
      })
    },
    showEditWarp(row) {
      this.$refs.editModal.editShow(row, async (newRow) => {
        await userServer.edit(newRow)
        rootVue.$Message.success('修改成功！')
        this.init()
      })
    },
    async delConfirm(row) {
      uiTool.delConfirm(async () => {
        await userServer.del(row)
        rootVue.$Message.success('删除成功！')
        this.init()
      })
    },

    async exportCsv(row) {
      await userServer.exportCsv(row)
    },
  },
}
</script>
